<template>
	<view>
		<u-navbar :title="title"></u-navbar>
		
		<view class="goodsList">
			<!-- <checkbox-group> -->
			<view class="list" v-for="(item,idx) in goodsList" :key="idx">
				<view class="goods">
					<u-checkbox v-model="item.check" shape="circle" active-color="#5EBD8A"
						size="40" label-size="28" @change="change(idx)">
					</u-checkbox>
					<image :src="item.goods_data.image" mode="" @click="list_on(idx)"></image>
					<view class="info">
						<view class="tit" @click="list_on(idx)">{{item.goods_data.title}}</view>
						<view class="bi" v-if="item.status == 0 && type==1" @click="list_on(idx)">
							可兑换：<text>{{item.exchange_integral}}</text>幸运币
						</view>
					</view>
				</view>
			</view>
			<view class="" style="height: 100rpx;"></view>
			<!-- </checkbox-group> -->
			<u-empty text="暂无数据" mode="list" :show="nullShow" margin-top="400"></u-empty>
		</view>
<!-- 		<view class="newagain" v-if="isOne == 0 && type==1">
			新人首次兑换，额外得重抽卡*1
		</view> -->
		<!-- <view class="newagain" v-if="type==3">
			单次提货满3件及以上包邮
		</view> -->
		
		<view class="bottom11 n-flex-row n-justify-between n-align-center">
			<u-checkbox @change='allSelectChange' v-model="allSelect" shape="circle" active-color="#5EBD8A"
				label-size="28" size="40">全选</u-checkbox>
			
			<view class="yixuan" v-if="type==1">
				<view class="text">
					已选{{xz_count}}件|合计：<view>{{xz_jiazhi}}<text>幸运币</text></view>
				</view>
			</view>
			<view class="yixuan" v-if="type==3">
				<view class="text">
					已选{{xz_count}}件商品
				</view>
			</view>
			<view class="btns n-flex-row" v-if="type==1">
				<view class="btn ti" @click="duihuan1"> 立即兑换 </view>
			</view>
			<view class="btns n-flex-row" v-if="type==2">
				<view class="btn ti" @click="zhuanzheng"> 立即转增 </view>
			</view>
			<view class="btns n-flex-row" v-if="type==3">
				<view class="btn ti" @click="tihuo"> 立即提货 </view>
			</view>
		</view>
		<u-popup v-model="zhuan" mode="center" border-radius="20">
			<view class="zhuan">
				<view class="tit">请输入转赠人的手机号</view>
				<u-input v-model="phone" type="number" maxlength="11" :border="true" placeholder="请输入转赠人注册手机号" />
				<view class="tip">注：一旦转赠成功不可退货，请谨慎操作</view>
				<view class="btns1">
					<view class="btn11 a" @click="zhuan = false">取消</view>
					<view class="btn11 b" @click="zhuanz">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'',
				type:0,
				goodsList:[],
				nullShow:false,
				isOne: '0',
				xz_count:0,
				xz_jiazhi:0,
				zhuan:false,
				phone: '', //转赠人手机号
				zhuanId: '',
				id:0,
			}
		},
		onLoad(option) {
			this.type = option.type
			this.id = option.id;
			if(this.type==1){
				this.title = '批量兑换';
			}
			if(this.type==2){
				this.title = '批量转增';
			}
			if(this.type==3){
				this.title = '批量提货';
			}
		},
		onShow() {
			this.getData(0);
		},
		//计算属性
		computed: {
			allSelect: {
				set: function(newVal) {
					this.goodsList.forEach(item => {
						item.check = newVal
					})
				},
				get: function() {
					return this.goodsList.every(item => {
						return item.check == true
					})
				}
			}
		},
		methods: {
			//全选
			allSelectChange() {
				this.allSelect = !this.allSelect
				let arr = []
				this.xz_jiazhi = Number(0);
				this.goodsList.forEach(item => {
					if (item.check == true) {
						this.xz_jiazhi = (Number(this.xz_jiazhi) + Number(item.exchange_integral)).toFixed(2);
						arr.push(item)
					}
				})
				this.xz_count = arr.length;
			},
			//单选
			change(index){
				this.goodsList[index].check = !this.goodsList[index].check
				let arr = []
				this.xz_jiazhi = Number(0);
				this.goodsList.forEach(item => {
					if (item.check == true) {
						this.xz_jiazhi = (Number(this.xz_jiazhi) + Number(item.exchange_integral)).toFixed(2);
						arr.push(item)
					}
				})
				this.xz_count = arr.length;
			},
			// 单选
			list_on(index){
				this.goodsList[index].check = !this.goodsList[index].check
				let arr = []
				this.xz_jiazhi = Number(0);
				this.goodsList.forEach(item => {
					if (item.check == true) {
						this.xz_jiazhi = (Number(this.xz_jiazhi) + Number(item.exchange_integral)).toFixed(2);
						arr.push(item)
					}
				})
				this.xz_count = arr.length;
				
			},
			duihuan1() {
				let arr = []
				this.goodsList.forEach(item => {
					if (item.check == true) {
						arr.push(item)
					}
				})
				if(arr.length == 0){
					this.$tip.tip("请选择商品")
					return
				}
				let data = []
				arr.forEach(val => {
					data.push({
						image: val.goods_data.image,
						name: val.goods_data.title,
						price: val.exchange_integral,
						id:val.id
					})
				})
				uni.setStorageSync('dui', data)
				uni.navigateTo({
					url: '/pages/cangku/duihuan'
				})
				console.log(data);
			},
			zhuanzheng(){
				let arr = []
				this.goodsList.forEach(item => {
					if (item.check == true) {
						arr.push(item.id)
					}
				})
				if(arr.length == 1){
					arr = arr[0]
				}else{
					arr = arr.join()
				}
				console.log(arr);
				this.zhuanId = arr
				if(arr.length == 0){
					this.$tip.tip("请选择商品")
					return
				}
				this.zhuan = true;
			},
			// 确定转赠
			zhuanz() {
				if (!this.$u.test.mobile(this.phone)) {
					this.$tip.tip("请输入正确的手机号")
					return
				}
				this.$http({
					url: "api/order/prize_give",
					data: {
						id: this.zhuanId,
						receive_username: this.phone
					}
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						this.zhuan = false
						this.phone = ""
						this.current = 2
						this.swiperCurrent = 2
						this.$tip.tip(res.data.msg)
						setTimeout(() => {
							uni.navigateBack({});
						}, 3000)
					} else {
						this.$tip.tip(res.data.msg)
					}
				}).catch(err => {});
			},
			//提货
			tihuo(){
				let arr = []
				let th_arr = [];
				this.goodsList.forEach(item => {
					if (item.check == true) {
						arr.push(item.id)
						var item_arr = {
							image: item.goods_data.image,
							name: item.goods_data.title,
							yunfei: item.goods_data.freight_value
						}
						th_arr.push(item_arr)
					}
				})
				if(arr.length == 1){
					arr = arr[0]
					var ids = arr;
				}else{
					var ids = arr.join();
				}
				console.log(th_arr);
				if(arr.length == 0){
					this.$tip.tip("请选择提货商品")
					return
				}
				uni.setStorageSync('tihuo_data', th_arr)
				uni.navigateTo({
					url: '/pages/cangku/confirmOrder_th?ids='+ids
				})
			},
			getData(sta) {
				uni.showLoading({
					title: "加载中"
				})
				this.goodsList = []
				this.$http({
					url: "api/order/get_prize_record",
					data: {
						status: sta
					}
				}).then(res => {
					uni.hideLoading()
					console.log(res, "商品");
					if (res.data.code == 1) {
			
						if (res.data.data.list.length == 0) {
							this.nullShow = true
						} else {
							this.nullShow = false
						}
						res.data.data.list.forEach(item => {
							item.check = false
						})
						this.goodsList = res.data.data.list
						if(this.type==3){ //批量提货的
							this.goodsList.forEach(item => {
								if (item.id == this.id) {
									item.check = true;
									this.xz_count = 1;
								}
							})
						}
			
						this.isOne = res.data.data.cck
					} else {
						this.nullShow = true
						this.$tip.tip(res.data.msg)
					}
				}).catch(err => {});
			},
		}
	}
</script>

<style>
	@import url("../../common/css/piliang_edit.css");
</style>
